<template>
  <div class="screen-shell">
    <span :class="{active: activeSort === index}" @click="active(index)" v-for="(s,index) in sort" :key="index">{{ s }}</span>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {storeToRefs} from "pinia";
import {useArticleStore} from "@/store/articleStore.js";

let {sort,activeSort} = storeToRefs(useArticleStore());
const articleStore = useArticleStore();
const active = function (index){
  activeSort.value = index
  articleStore.articleList=[]
  articleStore.getArticleList()
}
</script>

<style lang="scss" scoped>
@import "@/styles/var";

.screen-shell {
  font-size: 1.05rem;
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid rgb(145, 138, 138,0.5);

  span {
    margin: 0 10px;
    cursor: pointer;
  }
  span:hover{
    color: $color-theme;
  }
  span.active{
    color: $color-theme;
    border-bottom: #409eff solid 1px;
  }
  :first-child {
    margin-left: 0;
  }

}
</style>